/*
//
// Author: Sanjay Kairam (skairam@cs.stanford.edu)
//
*/

google.load('visualization', '1', {packages: ['table']});
google.load("visualization", "1", {packages:["corechart"]});

// $(document).ready(function() {
    // $(".collapsibleContainer").collapsiblePanel();
// });

var canvas, context;
var chart;

function draw() {
  canvas = document.getElementById("dtable");
 
  var	data = [['Andrea', 'Rad', 1],['Sanjay', 'Cool', 2],['Sean', 'Awesome', 3]];
  var	columns = [{sTitle: "Name"},{sTitle:"Description"},{stitle:"Number"}]

	// $(canvas).dataTable( {
	// 			"aaData": data,
	// 			"aoColumns": columns,
	// 			"aaSorting": [],
	// 			iDisplayLength: 20,  //number of Items to show
	// 			aoColumnDefs: [
	// 				{ "bSortable": false, "aTargets": ["_all"] }
	// 				],
	// 			"sDom": 'rt<"clear">' //we can change this setting for other controls such as pagination and whathaveu
	// 			,"sScrollY": "85%"//,
	//           // , "sScrollX": "200%"
	//           // , "sScrollXInner": "210%"
	// });

 // context = canvas.getContext('2d');
  //  context.strokeStyle = "#bbbbbb";
  //  context.strokeRect(0, 0, 1000, 150);
  //  context.stroke();
  //  context.strokeStyle = "#000000";
  //  canvas.addEventListener('mousemove', ev_mousemove, false);
 
}

function drawVisualization() {  
  var	data = mendeleyData;//[['Andrea', 'Rad', 1],['Sanjay', 'Cool', 2],['Sean', 'Awesome', 3]];
  var	data2 = mendeleyData;//[['Andrea', 'Rad', 1],['Sanjay', 'Cool', 2],['Sean', 'Awesome', 3]];
  
  var	columns = [{name:"Readers",type:"number"},{name:"Year",type:"number"},{name: "Title"},{name:"Author"},{name:"Type"},{name:"Url"},{name:"Abstract"}]
  var	columns2 = [{name:"Readers",type:"number"},{name:"Year",type:"number"}]

  var table = new google.visualization.DataTable();
  var table2 = new google.visualization.DataTable();
  

  columns.forEach(function(c){
    table.addColumn(c.type || 'string', c.name)	
  })
  table.addRows(data.length);
  
  columns2.forEach(function(c){
    table2.addColumn(c.type || 'string', c.name)	
  })
  table2.addRows(data.length);
  
  
  pv.range(data.length).forEach(function(r){
    pv.range(columns.length).forEach(function(c){
        table.setCell(r, c, data[r][c]);
    })	
  })
  pv.range(data2.length).forEach(function(r){
    pv.range(columns2.length).forEach(function(c){
        table2.setCell(r, c, data2[r][c]);
    })	
  })


	
  // data.addColumn('string', 'Title');
  // data.addColumn('string', 'Author');
  // data.addColumn('number', 'Year');
  // data.addColumn('number', 'Citations');
  // data.addColumn('number', 'Relevance');
  // data.addRows(2);
  // data.setCell(0, 0, 'Wikipedia and You');
  // data.setCell(1, 0, 'The Art of Wiki');
  // data.setCell(0, 1, 'Joe Researcher');
  // data.setCell(1, 1, 'Jane Scientist');
  // data.setCell(0, 2, 2008);
  // data.setCell(1, 2, 2004);
  // data.setCell(0, 3, 14);
  // data.setCell(1, 3, 18);
  // data.setCell(0, 4, 0.6);
  // data.setCell(1, 4, 0.5);
  
  
  
  // var formatter = new google.visualization.BarFormat({width: 50});
  // formatter.format(table, 0);
  
  //var urlFormatter = new google.visualization.PatternFormat('<a href="{5}">{5}</a>');
  //urlFormatter.format(table, [5, 5], 6); // Apply formatter and set the formatted value of the first column.
  
  // visualization = new google.visualization.Table(document.getElementById("radar-top"));
  
  // var options = {allowHtml: true, page: 'enable', sortColumn:0, sortAscending: false};
  
  
  // google.visualization.events.addListener(visualization, 'select', selectHandler);
  
  // var view = new google.visualization.DataView(table);
  // view.setColumns([0,1,2,3,4]); // Create a view with the first 4 column only.
  
  // visualization.draw(view, options);

  // function selectHandler() {
    // var selection = visualization.getSelection();
    
    // for (var i = 0; i < selection.length; i++) {
      // var item = selection[i];
      // var url = table.getFormattedValue(item.row, 5);
      // newwindow=window.open(url,'name','dependent=1,directories=1,fullscreen=1,resizable=1,scrollbars=1,status=1,toolbar=1,location=1,menubar=1,height=500,width=500');
      // if (window.focus) {newwindow.focus()};
    // };
    
  // }
 
  
  var view = new google.visualization.DataView(table);
  view.setColumns([1,0]); // Create a view with the first 4 column only.
  chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  
  google.visualization.events.addListener(chart, 'select', selectHandler);
  
  // Add our over/out handlers.
  // google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);
  // google.visualization.events.addListener(chart, 'onmouseout', barMouseOut);
  
  chart.draw(view, {width: 400, height: 240,
                          title: 'Readership and Year',
                          hAxis: {title: 'Year', format:'####'},
                          vAxis: {title: 'Readership'},
                          legend: 'none'
                         });
                         
  function selectHandler() {
    var selection = chart.getSelection();
    
    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      var title = table.getFormattedValue(item.row, 2);
      var author = table.getFormattedValue(item.row, 3);
      var type = table.getFormattedValue(item.row, 4);
      var url= table.getFormattedValue(item.row, 5);
      var abstract_text= table.getFormattedValue(item.row, 6);

      
      jQuery("#details").empty().append("<a href="+url+"<h3>"+title+"</h3>"+author+type+"<p>"+abstract_text+"</p></a>");
    };
  }
}

function barMouseOver(e) {
  //barsVisualization.setSelection([e]);
  var selection = chart.getSelection([e]);
  alert(selection.length);
  
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    var year = table2.getFormattedValue(item.row, 1);
    alert(year);
  };
}
  
function barMouseOut(e) {
  //barsVisualization.setSelection([{'row': null, 'column': null}]);
}

google.setOnLoadCallback(drawVisualization);

var started = false;
function ev_mousemove (ev) {
  var x, y;

  // Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX == 0) { // Firefox
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }

  // The event handler works like a drawing pencil which tracks the mouse 
  // movements. We start drawing a path made up of lines.
  if (!started) {
    context.beginPath();
    context.moveTo(x, y);
    started = true;
  } else {
    context.lineTo(x, y);
    context.stroke();
  }
}